<template>
  <div>
    <h1 class="align-cm">填写用户基本资料</h1>
    <!-- <pre>{{ form }}</pre> -->
    <van-cell-group>
      <van-cell
        v-model="form.出生日期"
        required
        title="出生日期"
        is-link
        @click="open生日日期()"
      />
      <van-popup v-model="picker.datetime.show">
        <van-datetime-picker
          type="date"
          title="选择年月日"
          :min-date="picker.datetime.option.mindate"
          :max-date="picker.datetime.option.maxdate"
          @confirm="confirm出生日期($event)"
          @cancel="close出生日期()"
        />
      </van-popup>
      <van-cell v-model="form.住址" required title="住址" placeholder="住址" />

      <van-field
        v-model="form.联系电话"
        required
        type="tel"
        label="联系电话"
        placeholder="联系电话"
      />
      <van-field
        v-model="form.联系人"
        required
        label="联系人"
        placeholder="联系人"
      />
      <van-field
        v-model="form.电子邮箱"
        label="电子邮箱"
        placeholder="电子邮箱"
      />

      <van-cell title="喜好玩具类型">
        <van-checkbox-group v-model="form.喜好玩具类型" @change="change">
          <van-checkbox class="mt20" name="0" shape="square">模型</van-checkbox>
          <van-checkbox class="mt20" name="1" shape="square"
            >绒毛布偶</van-checkbox
          >
          <van-checkbox class="mt20" name="2" shape="square">手办</van-checkbox>
          <van-checkbox class="mt20" name="3" shape="square"
            >益智类</van-checkbox
          >
        </van-checkbox-group>
      </van-cell>
    </van-cell-group>
    <van-cell-group>
      <van-button type="primary" block @click="submit()">提交</van-button>
    </van-cell-group>

    <!-- {{ submitArg }} -->
  </div>
</template>

<script>
import moment from 'moment';
import { Dialog } from 'vant';

export default {
  name: '',
  mixins: [], //混入
  components: {}, //组件
  props: {}, //集成属性
  data: () => {
    return {
      show: false,
      picker: {
        datetime: {
          show: false,
          option: {
            currentDate: new Date(2021, 0, 17),
            mindate: moment()
              .subtract(50, 'years')
              .toDate(),
            maxdate: moment().toDate(),
          },
        },
      },
      form: {
        出生日期: '',
        住址: '',
        联系电话: '',
        联系人: '',
        电子邮箱: '',
        喜好玩具类型: [],
      },
      submitArg: null,
    };
  },
  computed: {
    userInfo: function() {
      let _ = this._;
      let form = this.form;
      return {
        出生日期: _.get(form, '出生日期'),
        住址: _.get(form, '住址'),
        联系电话: _.get(form, '联系电话'),
        联系人: _.get(form, '联系人'),
        电子邮箱: _.get(form, '电子邮箱'),
        喜好玩具类型: _.get(form, '喜好玩具类型'),
      };
    },
  },
  methods: {
    open生日日期: function() {
      this.picker.datetime.show = true;
    },
    close出生日期: function() {
      this.picker.datetime.show = false;
    },
    confirm出生日期: function(value) {
      console.log(
        '%c [ confirm出生日期 ]-115',
        'font-size:13px; background:pink; color:#bf2c9f;'
      );
      this.form.出生日期 = moment(value).format('YYYY-MM-DD');
      this.close出生日期();
    },
    change: function() {
      console.log('change');
    },

    submit: function() {
      console.log('submit');
      let msg = JSON.stringify(this.userInfo, null, 2);
      Dialog.alert({
        message: `提交内容：${msg}`,
      }).then(() => {
        // on close
      });

      this.submitArg = this.userInfo;
    },
  },
};
</script>

<style></style>
